import axios from 'axios'
import store from '@/store'
import router from '@/router'
// baseURL设置
const instance = axios.create({
  // 后台请求基础地址，接口文档
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net'
})

// 全局注入token
// 请求拦截器
instance.interceptors.request.use(config => {
  // 1. 获取token
  const { token } = store.state.user.profile
  // 2. 请求头设置token
  if (token) {
    // 判断是否有token，如果有就把token存在请求头中
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, e => Promise.reject(e))

// token失效跳回到登录页
// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 请求成功，返回数据=》走到这里
    // 简化返回的数据
    // console.log('先到这里：', response.data)
    const { result } = response.data
    return result
  },
  (error) => {
    if (error.response.status === 401) {
      // 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
      // 需求：跳回登录后，登录成功，可以返回上次访问的页面？
      // 获取当前页面地址：router.currentRoute.value.fullPath
      // 注意：vue3获取的时候router.currentRoute.value，加上.value
      const redirectUrl = router.currentRoute.value.fullPath
      router.replace(`/login?redirectUrl=${redirectUrl}`)
    }
    return Promise.reject(error)
  }
)
/**
 * 对instance进行二次封装（非必须）
 * 需求：封装一个方法，接收三个参数：url method data
 * 问题：
 * 1. axios中发get请求，参数名：params
 * 1. axios中发post请求，参数名：data
 */
/**
 *
 * @param {*} url 后台请求地址
 * @param {*} method 方法（get/post）
 * @param {*} data 传递给后台的参数
 * @returns
 */
export default function request (url, method, data) {
  // 返回了一个Promise对象
  return instance({
    url,
    method,
    // params:data =》get请求
    // data:data =》post请求
    // 根据method动态判断属性名=》1. 如果是get参数名叫params 2. 如果是post参数名叫data
    [method === 'get' ? 'params' : 'data']: data
  })
}
